
$.fn.extend({
    etmPopupMenu: function(p) {
        p = $.extend({
            groups: {},
        }, p);

        return this.each(function () {
           // console.log(this);

            $("body").append("<div class='etmpopupmenu hidden' id='etmpopupmenu_" + this.id + "'></div>");
            var padding = 10;
            var totalGroupWidth = 0;
            var totalGroupHeight = 0;
            var itemHeight = 30;
            var groupCount = p.groups.length;
            var rowCount = 0;
            var popupMenuHtmlStr = "";
            $(p.groups).each(function (i, n) {
//                if (n.items.length > rowCount) {
//                    rowCount = n.items.length;
                //                }
                var tmpGroupHeight = 0;
                if (n.items != null && n.items.length > 0) {
                    totalGroupWidth += n.width;
                    popupMenuHtmlStr += "<div class='popupmenuitem borderRight' style='width:" + n.width + "px'>";
                    if (n.groupName != null && n.groupName.length > 1) {
                        tmpGroupHeight += itemHeight;
                        popupMenuHtmlStr += "<div class='itemtitle' style='padding-left:" + padding + "px;width:" + (n.width - padding) + "px;' >" + n.groupName + "</div>";
                    }
                    $(n.items).each(function (j, k) {
                        var text = k.Text;
                        if (text != null && text != "") {
                            tmpGroupHeight += itemHeight;
                            popupMenuHtmlStr += "<a style='padding-left:" + padding + "px;width:" + (n.width - padding) + "px;' ";
                            if (k.Selected) {
                                popupMenuHtmlStr += "class='popupmenuitemselected'";
                            }
                            if (k.ClickHide) {
                                popupMenuHtmlStr += " clickHide='true' ";
                            } else {
                                popupMenuHtmlStr += " clickHide='false' ";
                            }
                            popupMenuHtmlStr += " href=\"";
                            if (k.Url != null && k.Url != undefined && k.Url != "") {
                                popupMenuHtmlStr += k.Url;
                            } else {
                                popupMenuHtmlStr += "javascript:void(0)";
                            }
                            popupMenuHtmlStr += "\" >" + text + "</a>";
                        }
                      //  console.log(popupMenuHtmlStr);
                    });
                }
                if (totalGroupHeight < tmpGroupHeight) {
                    totalGroupHeight = tmpGroupHeight;
                }
             
                popupMenuHtmlStr += "</div>";
            });
            
            $("#etmpopupmenu_" + this.id).html(popupMenuHtmlStr).width((groupCount - 1) * 1 + totalGroupWidth).height(totalGroupHeight).find(".popupmenuitem:last").removeClass("borderRight");
            $("#etmpopupmenu_" + this.id).find(".popupmenuitem").height(totalGroupHeight);
            $("#etmpopupmenu_" + this.id).find("a").click(function (e) {
                if ($(this).attr("clickHide") == "false") {
                    e.stopPropagation();
                }
            });
            $("#" + this.id).click(function (e) {
                e.stopPropagation();
                $("#etmpopupmenu_" + this.id).removeClass("hidden").css({ "top": ($(this).offset().top+$(this).height() + 10) + "px", "left": ($(this).offset().left - totalGroupWidth/2) + "px" });
            });
            $("body").click(function() {
                $(".etmpopupmenu").addClass("hidden");
            });
        });
    }
});